/*
 * @Title: 团游详情
 * @Created by: ycq
 */
<template>
	<view :class="showColl||showTicket||showFx?'spot':''">
		<!-- 头部 -->
		<view class="spot-body" >
			<comHeader :config="navConfig"/>
			<view class="header">
				<image class="header-bg" src="../../../static/banner.png" mode=""></image>
				<view class="play" @click="play"></view>
				<view class="p-num" >
					<image src="/static/tupian.png" mode="aspectFit"></image>
					<text>10</text>
				</view>
				<view class="p-num" style="top: 208upx;">
					<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
				</view>
				<!-- <image src="../../../static/fanhui.png" class="back" @click="back"></image> -->
				<view class="header-bottom"></view>
			</view>
			
			<view class="spot-info">
				<text class="name">沈阳故宫</text>
				<view class="spot-info-btn">
					<image v-if="!isFenxiang" src="../../../static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="isFenxiang" src="../../../static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="!isShoucang" @click="coll()" src="../../../static/shoucang.png" mode=""></image>
					<image v-if="isShoucang" src="../../../static/shoucang-1.png" mode=""></image>
					<image v-if="!isAdd" src="../../../static/add.png" mode=""></image>
					<image v-if="isAdd" src="../../../static/add-1.png" mode=""></image>
					<image class="xingcheng" src="../../../static/xingcheng.png" mode=""></image>
					<view class="shenqi-btn" @click="toShenqi()">景区神器</view>
				</view>
				<view style="width: 100%;height: 200upx;">
					<view class="address">
						<view class="address-info">
							<image src="../../../static/pos-blue.png" mode=""></image>
							<text class="city">沈阳市沈河区沈阳路171号</text>
							<text class="way">乘坐地铁1号线到怀远门站下，不行787米</text>
							<text class="pl-num">1562条热门评论</text>
						</view>
					</view>
					<view class="begin">
						<text>导航</text>
						<image src="/static/jiantou.png" mode=""></image>
					</view>
				</view>
				
				<view class="list-title">
					<text class='shu'></text>
					<text>景区简介</text>
					<view class="audio-btn">语音导览</view>
				</view>
				<view  @click="openJJ=!openJJ" :class="openJJ?'des-open':'des'">
					<text>       
						沈阳故宫位于辽宁省沈阳市沈河区，是中国仅存的两大宫殿建筑群之一，又称盛京皇宫，为清朝初期的皇宫，距今近400年历史，始建于后金天命十年(1625年)。清朝入关前其皇宫设在沈阳，迁都北京后，是我国仅存的两大宫殿建筑群之一。
					</text>
					<view class="detail-tip">
						<image class="down" src="/static/d-down.png" :style="{transform:(openJJ?'rotate(180deg)':'')}" mode=""></image>
						<view class="more-detail">{{openJJ?'收起详情':'更多详情'}}</view>
					</view>
				</view>
				<view class="list-title" style="margin-top: 60upx;">
					<text class='shu'></text>
					<text>团游行程简介</text>
				</view>
				<text class="des" v-for="(item,index) in TripData" :key='index' v-if="showMoreTrip || index<2">       
					<text >{{item.trip}}</text>
				</text>
				<view class="down-more" @click="moreTrip" >
					<image src="/static/d-down.png" mode="" :style="showMoreTrip?'transform:rotate(180deg)':''"></image>
					<text v-if="!showMoreTrip">查看内容详情</text>
					<text v-if="showMoreTrip" >收起内容详情</text>
				</view>
				<view class="date-list">
					<view class="list-title">
						<text class='shu'></text>
						<text>出发日期</text>
					</view>
					<scroll-view  class="date-area" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="date-item" :class="dateIndex==index?'date-ac':''" v-for="(item,index) in dateData" :key='index' @click="chooseDate(index)">
							<text class="date-time">{{item.date}}</text>
							<text class="date-price">￥{{item.price}}起</text>
						</view>
					</scroll-view >
					<view class="date-more" @click="moreDate">更<br>多</view>
				</view>
			</view>
			
			<!-- 评论 -->
			<Comment    :isShowPlBox="false" :isShowAllHead="true" /> 
			<view class="down-more">
				<image src="/static/d-down.png" mode=""></image>
				<text>下拉查看更多</text>
			</view>
			<view style="height: 19vw;"></view>
		</view>
		<view class="bottom">
			<text class="bottom-price">总价:<text style="font-size: 34upx;">￥236</text></text>
			<view class="bottom-buy">立即预购</view>
		</view>
		<!-- <FootMenu /> -->
		<Ticket v-if="showTicket"></Ticket>
		<Collection v-if='showColl' />
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Comment from '@/components/Comment.vue'
	import Ticket from	'@/components/ticketDetail.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				showColl:false,
				isFenxiang:true,
				dateIndex:0,
				isShoucang:false,
				openJJ:false,
				showTicket:false,
				showFx:false,
				isAdd:false,
				showMoreTrip:false,
				navConfig:{
					isFixed:false,
					comScroll:200,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				TripData:[
					{
						trip:'一、游玩第一站，冰浴枫叶谷，早上八点二十在酒店门口集合，跟随导游前往景区地点',
					},
					{
						trip:'二、游玩第一站，冰浴枫叶谷，早上八点二十在酒店门口集合，跟随导游前往景区地点',
					},
					{
						trip:'三、游玩第一站，冰浴枫叶谷，早上八点二十在酒店门口集合，跟随导游前往景区地点',
					},
					{
						trip:'四、游玩第一站，冰浴枫叶谷，早上八点二十在酒店门口集合，跟随导游前往景区地点',
					},
					{
						trip:'五、游玩第一站，冰浴枫叶谷，早上八点二十在酒店门口集合，跟随导游前往景区地点',
					},
				],
				dateData:[
					{
						date:'1月',
						price:3698
					},
					{
						date:'2月',
						price:3698
					},
					{
						date:'3月',
						price:3698
					},
					{
						date:'4月',
						price:3698
					},
					{
						date:'5月',
						price:3698
					},
					{
						date:'6月',
						price:3698
					},
					{
						date:'7月',
						price:3698
					},
					{
						date:'8月',
						price:3698
					},
					{
						date:'9月',
						price:3698
					},
					{
						date:'10月',
						price:3698
					},
					{
						date:'11月',
						price:3698
					},
					{
						date:'12月',
						price:3698
					}
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
				type: '',//uniPopup组件类型
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			play(){
				uni.navigateTo({
					url:'photo'
				})
			},
			showTicketDetail(){
				this.showTicket = true
				document.body.style.overflow = 'hidden'
			},
			closeTicket(){
				document.body.style.overflow = 'scroll'
				this.showTicket = false
			},
			toShenqi(){
				uni.navigateTo({
					url:'map/map'
				})
			},
			coll(){
				this.showColl=true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			toOrder(){
				uni.navigateTo({
					url:'spotOrder'
				})
			},
			moreDate(){
				uni.navigateTo({
					url:'crewDate'
				})
			},
			moreTrip(){
				this.showMoreTrip =! this.showMoreTrip
			},
			chooseDate(index){
				this.dateIndex = index
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			togglePopup(type,open){
				this.type = type;
				this.showFx = true
				document.body.style.overflow = 'hidden'
				this.$refs[open].open()
			},
			cancel(type) {
				this.showFx = false
				document.body.style.overflow = 'scroll'
				this.$refs[type].close()
			},
		},
		components:{
			Comment,
			Ticket,
			uniPopup
		}
	}
</script>

<style scoped>
	.spot{
		position: relative;
	}
	.spot-body{
		position: absolute;
		}
	.header{
		width: 750upx;
		height: 575upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 575upx;
		position: absolute;
	}
	.back{
		width: 30upx;
		height: 36upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.play{
		position: absolute;
		top:295upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}

	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		position: absolute;
	}
	.spot-info{
		width: 750upx;
		height: auto;
		background: #FFFFFF;
	}
	.name{
		font-size: 32upx;
		margin-left: 37upx;
		height: 30upx;
		float: left;
		font-weight: bold;
		margin-right: 0;
	}
	
	.spot-info-btn{
		width: 710upx;
		height: 37upx;
		padding-top: 80upx;
		margin-left: 37upx;
		
	}
	.spot-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.shenqi-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		margin-top: -10upx;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		margin-right: 40upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	.address{
		margin-top: 30upx;
		margin-left: 37upx;
		width: 450upx;
		height: auto;
		display: table;
		float: left;
	}
	.address-info{
		width: 450upx;
		height: auto;
		float: left;
	}
	.address-info image{
		float: left;
		width: 26upx;
		margin-top: 10upx;
		height: 30upx;
	}
	.city{
		float: left;
		font-size: 30upx;
		height: 30upx;
		
		margin-left: 20upx;
	}
	.way{
		width: 450upx;
		display: block;
		margin-top: 60upx;
		font-size: 24upx;
		color: #888888;
	}
	.pl-num{
		font-size: 24upx;
		color: #888888;
		margin-left: 40upx;
	}
	.begin{
		width: 80upx;
		height: 60upx;
		float: right;
		margin-top: 40upx;
		line-height: 60upx;
		margin-right: 24upx;
	}
	.begin text{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		float: left;
	}
	.begin image{
		width: 25upx;
		margin-top: 20upx;
		height: 25upx;
		float: right;
	}
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 30upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.audio-btn{
		width: 144upx;
		height: 45upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		margin-top: 5upx;
		padding-right: 0;
		margin-right: 20upx;
		line-height: 45upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.des text{
		width: 662upx;
		padding-left: 44upx;
		padding-right: 44upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-align:justify;
		text-indent:56upx;
		height: auto;
		font-size: 28upx;
		margin-top: 20upx;
		color: #888888;
	}
	.des-open text{
		width: 662upx;
		padding-left: 44upx;
		padding-right: 44upx;
		display: block;
		text-align:justify;
		text-indent:56upx;
		height: auto;
		font-size: 28upx;
		margin-top: 20upx;
		color: #888888;
	}
	.detail-tip{
		margin-top: 20upx;
		display: flex;
		flex-direction:row;
		align-items:center;
		justify-content:center; /*对齐方式*/
		
	}
	.detail-tip .down{
		width: 22upx;
		height: 22upx;
		min-width: 14px;
		min-height: 14px;
	}
	.detail-tip .more-detail{
		font-size: 28upx;
		color: #D9D9D9;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 103upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	/* 房间预定 */
	.spot-list{
		width: 710upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80upx;
		height: auto;
	}
	.spot-item{
		width: 710upx;
		height: 60upx;
		margin-top: 50upx;
	}
	.title-text{
		font-size: 28upx;
		float: left;
		margin-left: 60upx;
		line-height: 60upx;
	}
	.price{
		font-size: 28upx;
		line-height: 60upx;
		color: #DD540A;
		float: left;
		margin-left: 100upx;
	}
	.buy{
		width: 138upx;
		height: 60upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		margin-right: 20upx;
		line-height: 60upx;
		border-radius: 30upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.quxiao{
		font-size: 28upx;
		color: #000000;
		margin-top: 20upx;
		float: left;
	}
	/* 热门评论 */
	.down-more{
		width: 750upx;
		height: 30upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content:center;
		margin-top: 50upx;
	}
	.down-more image{
		width: 24px;
		height: 20px;
		margin-right: 30upx;
		
		/* padding-top: 30upx; */
		
	}
	.down-more text{
		
		font-size: 28upx;
		line-height: 35upx;
		color: #D3D2D2;
	}
	.date-list{
		width: 750upx;
		margin-top: 80upx;
		height: 162upx;
	}
	.date-area{
		white-space: nowrap;
		height: 88upx;
		width: 650upx;
		margin-left: 20upx;
		display: flex;
		float: left;
		flex-direction: row;
		
	}
	.date-item{
		display: inline-block;
		width: 142upx;
		height: 76upx;
		border: #B2DCFF solid 1px;
		margin: 2upx 8upx;
		border-radius: 10upx;
	}
	.date-ac{
		border: #54B1FF solid 1px;
	}
	.date-time{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 28upx;
	}
	.date-price{
		width: 142upx;
		display: block;
		text-align: center;
		font-size: 24upx;
		color: #E25115;
	}
	.date-more{
		width: 65upx;
		height: 80upx;
		border: #212121 solid 1upx;
		border-radius: 10upx 0 0 10upx;
		border-right: none;
		float: right;
		font-size: 26upx;
		line-height: 40upx;
		text-align: center;
	}
	.bottom{
		width: 750upx;
		height: 100upx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		box-shadow: 0px -5px 16px 0px rgba(47,155,254,0.16);
	}
	.bottom-buy{
		width: 284upx;
		height: 100upx;
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
		font-size: 32upx;
		text-align: center;
		line-height: 100upx;
		color: #FFFFFF;
	}
	.bottom-price{
		float: left;
		line-height: 100upx;
		font-size: 26upx;
		color: #E25115;
		margin-left: 45upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
</style>
